<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <div th:replace="common/publicJs::common_header"></div>

    <!--    <link rel="stylesheet" type="text/css" th:href="@{js/jquery-easyui/themes/gray/easyui.css}"/>-->
    <script type="text/javascript">
        $(function () {
            $('#tabs').tabs({
                fit: true,
                border: false,
            });
            //加载左侧菜单树
            $('#menuContainer').tree({
                url: ctx + 'sys/menu/all',
                id: 'id',
                textField: 'name',
                parentField: 'parentId',
                // 此属性不是easyui自带的。是通过扩展loadfilter方法定义的
                iconCls:'iconClass',
                //属性列表，此属性不是easyui自带的。是通过扩展loadfilter方法定义的
                attributes: ['url'],
                lines: true,
                //菜单打开与关闭是否有动画效果
                animate: true,
                loadFilter:function(data){
                    var opt = $(this).data().tree.options;
                    var idField, textField, parentField,iconCls;
                    if (opt.parentField) {
                        idField = opt.idField || 'id';
                        textField = opt.textField || 'text';
                        parentField = opt.parentField;
                        iconCls = opt.iconCls || 'iconCls';
                        var i, l, treeData = [], tmpMap = [];
                        for (i = 0, l = data.length; i < l; i++) {
                            tmpMap[data[i][idField]] = data[i];

                            //支持attributes自定义属性
                            var attributes,m,n;
                            if (opt.attributes) {
                                attributes = opt.attributes||[];
                                var obj = {};
                                for (m = 0,n = attributes.length; m < n; m++){
                                    var attrName = attributes[m];
                                    obj[attrName] = data[i][attrName];
                                }
                                data[i]['attributes'] = obj;
                            }
                            data[i]['iconCls'] = data[i][iconCls];
                        }
                        for (i = 0, l = data.length; i < l; i++) {
                            if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
                                if (!tmpMap[data[i][parentField]]['children'])
                                    tmpMap[data[i][parentField]]['children'] = [];
                                data[i]['text'] = data[i][textField];
                                tmpMap[data[i][parentField]]['children'].push(data[i]);
                            } else {
                                data[i]['text'] = data[i][textField];
                                treeData.push(data[i]);
                            }
                        }
                        return treeData;
                    }
                    return data;
                },
                onLoadSuccess: function (node, data) {
                    var roots = $('#menuContainer').tree('getRoots');
                    var allNodes = getAllNodes(roots, []);
                    for (var i = 0; i < allNodes.length; i++) {
                        if (allNodes[i]['expandState'] === 0) {
                            $('#menuContainer').tree('collapse',allNodes[i].target);
                        }
                    }
                },
                onClick: function (node) {
                    var isLeaf = $('#menuContainer').tree('isLeaf',node.target);
                    if (isLeaf && node.attributes.url) {
                        open(node.text, node.attributes.url,node.iconCls);
                    }else{
                        $('#menuContainer').tree('toggle',node.target);
                    }

                }
            })
        });

        /**
         * 递归获取树所有节点
         * @param data 所有根节点的数据
         * @param temp  存储所有节点的列表
         * @returns {*}
         */
        function getAllNodes(data, temp) {
            for (var i = 0; i < data.length; i++) {
                temp.push(data[i]);
                if (data[i].children) {
                    getAllNodes(data[i].children, temp);
                }
            }
            return temp;
        }

        //在右边center区域打开菜单，新增tab
        function open(text, url, icon) {
            if ($("#tabs").tabs('exists', text)) {
                $('#tabs').tabs('select', text);
            } else {
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+(ctx + url)+'" style="width:100%;height:100%;"></iframe>';
                $('#tabs').tabs('add', {
                    title: text,
                    closable: true,
                    content:content,
                    iconCls: icon
                });
            }
        }

        /**
         * 刷新左侧菜单内容
         */
        function reFresh() {
            $('#menuContainer').tree('reload');
        }

        function userInfo(id) {
            var url = "sys/user/userInfo?id="+id;
            open("用户信息", url, null);
        }

    </script>
</head>
<body class="easyui-layout">
<!--头部区域-->
<div data-options="region:'north',title:'',split:false" style="height:30px; font-size: 20px">
    <span>欢迎来到start</span>
    <span style="float: right;margin-right: 20px;">
        用户:<a href="#" id="userInfo" th:onclick="userInfo([[${user.id}]]);"><span th:text="|${user.name}[${user.loginName}]|" >用户：小刚</span></a>
    </span>

<!--    <span th:text="'用户'+${username}">用户：小刚</span>-->
</div>
<!--    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>-->
<!--    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>-->
<!-- 左侧菜单栏 -->
<div id="left" data-options="region:'west',title:'<a href=\'#\' onclick=\'reFresh();\'>菜单</a>',split:true" style="width:200px;">
<!--    <div style="font-size: 20px;background: #e0ecff;text-align: center" onclick="reFresh()">菜 单</div>-->
    <div id="menuContainer"></div>
</div>

<!--中部区域-->
<div data-options="region:'center',title:''">
    <div id="tabs">
        <div title="起始页" style="padding:0 10px;display:block;">欢迎进入系统</div>
    </div>
</div>
</body>
</html>